import React, { Component, Fragment } from 'react'
import  {Link} from 'react-router-dom'
import {Button,Form,Input,Table,Switch,message,Modal} from "antd";
// api
import {deleteDepartment,getDepartmentList,changeStatus,getDepartmentByKeyWord} from '@api/department';


export default class List extends Component {
   state={
          pid:'',
          tableLoading:'',
          pageNumber:1,
          pageSize:8,
          keyWord:'',
          selectedRowKeys:'',
          visible:false,
          confirmLoading:false,
          columns : [
              { title: '部门名称', dataIndex: 'departmentName' },
              { title: '负责人', dataIndex: 'leader' },
              { title: '禁启用',  dataIndex: 'status',render:(text,rowData)=>{ return <Switch onChange={()=>this.changeStatus(rowData)} checkedChildren="启用" unCheckedChildren="禁用"  defaultChecked={rowData.status===1?true:false} />}},
              { title: '人员数量', dataIndex: 'peopleNumber',
                sorter: {
                  compare: (a, b) => a.math - b.math,
                  multiple: 2,
                },
              },
              { title: '操作', dataIndex: 'operation',render:(text,rowData)=>{return (<div className='inline-button'><Button type='primary'><Link to={{pathname:'/index/department/add',state:{pid:rowData.pid}}}>编辑</Link></Button><Button onClick={()=>this.showModal(rowData.pid)}>删除</Button></div>)}},
            ],
            data:[
              {pid: '1', departmentName: '小朋友', status: 0, peopleNumber: 60, english: 70, },
              {pid: '2', departmentName: '大朋友', status: 1,  peopleNumber: 66, english: 89, },
              {pid: '3', departmentName: '小傻瓜', status: 0,  peopleNumber: 20, english: 36, },
              {pid: '4', departmentName: '阿萨德', status: 0,  peopleNumber: 36, english: 29, },

            ]
        }

      // 完成挂载就加载列表
    componentDidMount(){
      this.loadData();
    }

    /* 搜索和加载列表*/
    loadData=()=>{
      this.setState({tableLoading:true})
      const {pageNumber,pageSize,keyWord}=this.state
        const requestData={
          pageNumber,
          pageSize, 
        }
        //有搜索关键字就传到后天 返回特定数据
        // if(keyWord){
        //   requestData.keyWord=keyWord
        // }
        getDepartmentList(requestData).then(response=>{
          console.log(response);
          if(response.data){//如果返回不为空
            this.setState({
              data:response.data,
              tableLoading:false
            })
          }
        })
    }

    /*发送搜索*/
    onFinish=(val)=>{
      this.setState({
        pageNumber:1,
        pageSize:10,
        keyWord:val.name,
        selectedRowKeys:this.state.selectdRowKeys
      })
      getDepartmentByKeyWord(val.name).then(response=>{
          console.log(response)
            if(response.data){//如果返回不为空
                this.setState({
                    data:response.data,
                })
            }
        })
    }
    // 禁用启用改变状态
    changeStatus(rowData){
      // if(!rowData.status){return false}
      const requestData={
        pid:rowData.pid, 
        status:rowData.status==1?0:1
      }
      changeStatus(requestData).then(res=>{
        message.info("成功了！")
        this.loadData()
      }).catch(err=>{console.log('失败了！');})
    }
   
    // 删除所选行部门
    onHandlerDelete=(id)=>{ 
      if(!id){
        let selectedRowKeys=this.state.selectedRowKeys
        if(selectedRowKeys.length == 0)
        return false
        console.log(selectedRowKeys)
        this.showModal(selectedRowKeys)
      }
        // console.log(id);
        // deleteDepartment(id).then(res=>{
        //   console.log(res);
        //   message.success('删除成功')
        // }).then(err=>{message.error('删除失败');})
      
    }
    // 打印出所选择的是第几行
    onSelectChange = selectedRowKeys => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.setState({ selectedRowKeys });
    }
    // 显示删除对话框
    showModal = (pid) => {
      this.setState({
        visible: true,
          pid
      })
    }
    // 隐藏删除对话框
    hideModal = () => {
      this.setState({
        visible: false,
      })
    }
    
    handleDelete=()=>{
      this.setState({
        confirmLoading: true,
      })
      deleteDepartment(this.state.pid).then(res=>{
          message.success('删除成功')
          this.setState({
          confirmLoading: false,
          visible: false,
          selectedRowKeys:[],
          pid:''
          })
        }).catch(err=>{message.error('删除失败');
          this.setState({
              confirmLoading: false,
              visible: false,
          })
        }
    )
      this.loadData()
    }
    onChange=(pagination, filters, sorter, extra)=>{
      console.log('params', pagination, filters, sorter, extra);
    }
    

    render() { 
      const {data,columns,selectedRowKeys,visible,confirmLoading,tableLoading} =this.state
      const rowSelection = {
          selectedRowKeys,
          onChange: this.onSelectChange
      }
        return (
           <Fragment>
               <Form layout="inline" onFinish={this.onFinish}>
                    <Form.Item label='部门名称' name='name'>
                        <Input placeholder='请输入部门名称' />
                    </Form.Item>
                    <Form.Item >
                       <Button type='primary' htmlType='submit'>搜索</Button>
                    </Form.Item>
               </Form>
               <div className='table-wrap' >
               {/* 对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。 */}
                 <Table rowKey="pid" columns={columns} dataSource={data} rowSelection={rowSelection}  onChange={this.onChange} bordered loading={tableLoading}/>
                 <Button onClick={()=>this.onHandlerDelete() }>批量删除</Button>
               </div>
               {/* 对话框 */}
               <Modal title="提示" visible={visible}  confirmLoading={confirmLoading} onOk={()=>this.handleDelete()} onCancel={this.hideModal} okText="确认"  cancelText="取消" >
                <strong>是否删除</strong>
              </Modal>
           </Fragment>
        )
    }
}
